<template>  <!-- 根据登录状态显示不同内容 -->
  <template v-if="isLoggedIn">
    <!-- Feed流内容 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 作品卡片 -->
        <div v-for="post in posts" :key="post.id" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 pattern-checks-lg">
          <!-- 作品图片 -->
          <div class="relative aspect-w-4 aspect-h-3 flex items-center justify-center">
            <NuxtImg :src="post.imageUrl" :alt="post.title" class="object-cover w-full h-full" loading="lazy" placeholder />
          </div>

          <!-- 作品信息 -->
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <UAvatar
                size="sm"
                :src="post.author.avatar"
                :alt="post.author.name"
              />
              <div>
                <h3 class="text-sm font-medium text-gray-900">{{ post.author.name }}</h3>
                <p class="text-xs text-gray-500">{{ post.createdAt }}</p>
              </div>
            </div>
            
            <h2 class="text-lg font-medium text-gray-900 mb-2">{{ post.title }}</h2>
            <p class="text-sm text-gray-500 mb-4">{{ post.description }}</p>
            
            <!-- 摄影参数信息 -->
            <div v-if="post.photoParams" class="flex flex-wrap gap-2 mb-4">
              <UBadge v-if="post.photoParams.aperture" color="primary" variant="solid" class="flex items-center gap-1 hover:bg-primary-600 transition-colors">
                <UIcon name="i-heroicons-adjustments-horizontal" class="h-3 w-3" />
                <span>{{ post.photoParams.aperture }}</span>
              </UBadge>
              <UBadge v-if="post.photoParams.shutterSpeed" color="primary" variant="solid" class="flex items-center gap-1 hover:bg-primary-600 transition-colors">
                <UIcon name="i-heroicons-clock" class="h-3 w-3" />
                <span>{{ post.photoParams.shutterSpeed }}</span>
              </UBadge>
              <UBadge v-if="post.photoParams.iso" color="primary" variant="solid" class="flex items-center gap-1 hover:bg-primary-600 transition-colors">
                <UIcon name="i-heroicons-sun" class="h-3 w-3" />
                <span>{{ post.photoParams.iso }}</span>
              </UBadge>
              <UBadge v-if="post.photoParams.focalLength" color="primary" variant="solid" class="flex items-center gap-1 hover:bg-primary-600 transition-colors">
                <UIcon name="i-heroicons-viewfinder-circle" class="h-3 w-3" />
                <span>{{ post.photoParams.focalLength }}</span>
              </UBadge>
              <UBadge v-if="post.photoParams.camera" color="primary" variant="solid" class="flex items-center gap-1 hover:bg-primary-600 transition-colors">
                <UIcon name="i-heroicons-camera" class="h-3 w-3" />
                <span>{{ post.photoParams.camera }}</span>
              </UBadge>
            </div>
            
            <!-- 互动区域 -->
            <div class="flex items-center justify-between text-sm text-gray-500">
              <div class="flex items-center space-x-4">
                <button class="flex items-center space-x-1 hover:text-primary-600" @click="handleLike(post.id)">
                  <UIcon :name="post.isLiked ? 'i-heroicons-heart-solid' : 'i-heroicons-heart'" class="h-5 w-5" />
                  <span>{{ post.likes }}</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-primary-600" @click="handleComment(post.id)">
                  <UIcon name="i-heroicons-chat-bubble-left" class="h-5 w-5" />
                  <span>{{ post.comments }}</span>
                </button>
              </div>
              <UDropdown
                :items="postMenuItems"
                :ui="{ item: { base: 'flex items-center gap-2 cursor-pointer' } }"
              >
                <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal" />
              </UDropdown>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div v-if="loading" class="flex justify-center py-8">
        <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-primary-600" />
      </div>
    </main>
  </template>
  <template v-else>
    <!-- 未登录时显示的内容 -->
    <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 relative overflow-hidden">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10 pointer-events-none">
        <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
        <div class="absolute top-1/3 -right-24 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
        <div class="absolute -bottom-24 left-1/3 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
      </div>
      
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <!-- 英雄区域 -->
        <div class="flex flex-col lg:flex-row items-center gap-12 mb-20">
          <div class="lg:w-1/2 text-center lg:text-left">
            <h2 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
              <span class="block">分享你的视角</span>
              <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-indigo-600">定格精彩瞬间</span>
            </h2>
            <p class="mt-6 text-base text-gray-500 sm:text-lg sm:max-w-xl sm:mx-auto md:text-xl lg:mx-0">
              加入我们的摄影社区，展示你的作品，结识志同道合的摄影爱好者，一起分享摄影的乐趣。
            </p>
            <div class="mt-8 sm:flex sm:justify-center lg:justify-start gap-4">
              <ULink to="/user/register" class="transform transition hover:scale-105">
                <UButton size="xl" color="primary" class="flex items-center space-x-2 shadow-lg">
                  <UIcon name="i-heroicons-user-plus" class="h-6 w-6" />
                  <span>立即加入</span>
                </UButton>
              </ULink>
              <ULink to="/explore" class="mt-3 sm:mt-0 transform transition hover:scale-105">
                <UButton size="xl" color="primary" variant="ghost" class="flex items-center space-x-2">
                  <UIcon name="i-heroicons-photo" class="h-6 w-6" />
                  <span>浏览作品</span>
                </UButton>
              </ULink>
            </div>
          </div>
          <div class="lg:w-1/2 mt-10 lg:mt-0">
            <div class="relative rounded-2xl overflow-hidden shadow-2xl transform transition hover:scale-[1.01] duration-300">
              <img src="https://images.unsplash.com/photo-1452587925148-ce544e77e70d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" 
                   alt="摄影展示" 
                   class="w-full h-auto object-cover" />
              <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                <p class="text-white text-lg font-medium">探索无限创意可能</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 精选作品轮播图 -->
        <div class="mb-24">
          <div class="text-center mb-10">
            <h3 class="text-3xl font-bold text-gray-900 mb-4">精选作品展示</h3>
            <div class="w-24 h-1 bg-gradient-to-r from-primary-500 to-indigo-600 mx-auto rounded-full"></div>
          </div>
          <UCarousel 
            v-slot="{ item }" 
            dots 
            :items="carouselItems" 
            :ui="{ 
              container: 'rounded-xl',  // 去掉 overflow-hidden shadow-lg
              item: 'basis-full sm:basis-1/2 lg:basis-1/3 px-4',
              controls: {
                wrapper: 'absolute inset-0 flex items-center justify-between p-2',
                base: 'bg-white/80 hover:bg-white text-gray-800 rounded-full p-2 backdrop-blur-sm transition-all duration-200 mx-2 hover:scale-110'
              }
            }">
            <div class="relative group overflow-hidden rounded-xl transform transition duration-300 mx-2 mb-4">  <!-- 去掉 hover:shadow-xl -->
              <div class="relative aspect-[4/3] overflow-hidden">
                <img 
                  :src="item.img" 
                  class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  loading="lazy"
                  :alt="item.title"
                />
              </div>
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-5">
                <h3 class="text-white text-xl font-semibold mb-2 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">{{ item.title }}</h3>
                <div class="flex items-center justify-between mb-3">
                  <span class="text-white/90 text-sm font-medium">{{ item.author }}</span>
                  <div class="flex space-x-2">
                    <UBadge v-if="item.aperture" color="white" variant="soft" size="xs" class="flex items-center gap-1 backdrop-blur-sm">
                      <UIcon name="i-heroicons-adjustments-horizontal" class="h-3 w-3" />
                      <span>{{ item.aperture }}</span>
                    </UBadge>
                    <UBadge v-if="item.shutterSpeed" color="white" variant="soft" size="xs" class="flex items-center gap-1 backdrop-blur-sm">
                      <UIcon name="i-heroicons-clock" class="h-3 w-3" />
                      <span>{{ item.shutterSpeed }}</span>
                    </UBadge>
                  </div>
                </div>
                <UButton 
                  color="white" 
                  variant="solid" 
                  size="sm" 
                  class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 self-start"
                  :to="`/post/${item.id}`"
                >
                  <UIcon name="i-heroicons-eye" class="h-4 w-4 mr-1" />
                  查看详情
                </UButton>
              </div>
            </div>
          </UCarousel>
        </div>

        <!-- 特色区域 -->
        <div class="mb-20">
          <div class="text-center mb-16">
            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-4">为什么选择我们的社区？</h2>
            <p class="mt-4 text-xl text-gray-500 max-w-3xl mx-auto">这里有最专业的摄影分享平台和最热情的摄影爱好者</p>
            <div class="w-24 h-1 bg-gradient-to-r from-primary-500 to-indigo-600 mx-auto rounded-full mt-6"></div>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            <!-- 特色1 -->
            <div class="bg-white rounded-xl shadow-md p-6 transform transition duration-300 hover:shadow-xl hover:-translate-y-1">
              <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <UIcon name="i-heroicons-photo" class="h-8 w-8 text-primary-600" />
              </div>
              <h3 class="text-xl font-bold text-center mb-3">高质量作品展示</h3>
              <p class="text-gray-500 text-center">提供专业的摄影作品展示平台，支持高清图片上传和详细的摄影参数记录。</p>
            </div>
            
            <!-- 特色2 -->
            <div class="bg-white rounded-xl shadow-md p-6 transform transition duration-300 hover:shadow-xl hover:-translate-y-1">
              <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <UIcon name="i-heroicons-user-group" class="h-8 w-8 text-primary-600" />
              </div>
              <h3 class="text-xl font-bold text-center mb-3">活跃的摄影社区</h3>
              <p class="text-gray-500 text-center">结识志同道合的摄影爱好者，分享经验，交流技巧，共同进步。</p>
            </div>
            
            <!-- 特色3 -->
            <div class="bg-white rounded-xl shadow-md p-6 transform transition duration-300 hover:shadow-xl hover:-translate-y-1">
              <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <UIcon name="i-heroicons-academic-cap" class="h-8 w-8 text-primary-600" />
              </div>
              <h3 class="text-xl font-bold text-center mb-3">摄影技巧学习</h3>
              <p class="text-gray-500 text-center">提供丰富的摄影教程和技巧分享，从入门到专业，满足不同阶段摄影师的学习需求。</p>
            </div>
          </div>
        </div>
        
        <!-- 底部号召性区域 -->
        <div class="bg-white rounded-2xl shadow-xl p-10 mb-16 relative overflow-hidden">
          <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-primary-50 to-transparent opacity-70"></div>
          <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
            <div class="md:w-2/3">
              <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">准备好展示你的摄影作品了吗？</h3>
              <p class="text-gray-600 mb-6">加入我们的社区，与全球摄影爱好者一起分享你的创作，获得专业反馈和灵感。</p>
              <div class="flex flex-wrap gap-4">
              </div>
            </div>
            <div class="md:w-1/3 flex justify-center">
              <div class="relative w-32 h-32 md:w-40 md:h-40">
                <div class="absolute inset-0 bg-primary-100 rounded-full animate-ping opacity-25"></div>
                <div class="relative flex items-center justify-center w-full h-full bg-primary-50 rounded-full border-4 border-primary-100">
                  <UIcon name="i-heroicons-camera" class="h-16 w-16 text-primary-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 统计数据 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
          <div class="bg-white rounded-xl p-6 text-center shadow-md">
            <div class="text-4xl font-bold text-primary-600 mb-2">10K+</div>
            <div class="text-gray-500">活跃用户</div>
          </div>
          <div class="bg-white rounded-xl p-6 text-center shadow-md">
            <div class="text-4xl font-bold text-primary-600 mb-2">50K+</div>
            <div class="text-gray-500">精选作品</div>
          </div>
          <div class="bg-white rounded-xl p-6 text-center shadow-md">
            <div class="text-4xl font-bold text-primary-600 mb-2">100+</div>
            <div class="text-gray-500">专业摄影师</div>
          </div>
          <div class="bg-white rounded-xl p-6 text-center shadow-md">
            <div class="text-4xl font-bold text-primary-600 mb-2">24/7</div>
            <div class="text-gray-500">全天候支持</div>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { Motion } from '@motionone/vue'
const carouselItems = [
  {
    img: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    title: '晨曦微露',
    author: '摄影师小李',
    aperture: 'f/2.8',
    shutterSpeed: '1/200s'
  },
  {
    img: 'https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    title: '城市天际线',
    author: '摄影师小王',
    aperture: 'f/8',
    shutterSpeed: '1/500s'
  },
  {
    img: 'https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    title: '海边日落',
    author: '摄影师小张',
    aperture: 'f/4',
    shutterSpeed: '1/100s'
  }
]
</script>